<template>
<div class="pa-3">
  <v-card>
    <v-card-title>
      <v-text-field dense outlined label="新增商品分类" hide-details v-model="categoryName"></v-text-field>
      <v-btn color="primary"  @click="handleAddGoodsCategory">新增</v-btn>
    </v-card-title>
    <v-card-text>
      <v-simple-table>
        <thead>
        <tr>
          <td>名称</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="goodsCategory in goodsCategoryList" :key="goodsCategory.id">
          <td>{{goodsCategory.name}}</td>
          <td>
            <v-btn text color="error" @click="handleDeleteGoodsCategory(goodsCategory)">删除</v-btn>
          </td>
        </tr>
        </tbody>
      </v-simple-table>
    </v-card-text>
  </v-card>
</div>
</template>

<script>
import {deleteGoodsCategoryNoGoods, insertGoodsCategory, selectGoodsCategory} from "../../http/api/goods";

export default {
  name: "GoodsCategory",
  data:()=>({
    goodsCategoryList:[],
    categoryName:null
  }),
  created() {
    this.init()
  },
  methods:{
    init(){
      this.getCategory()
    },
    getCategory(){
      selectGoodsCategory().then(res=>{
        this.goodsCategoryList = res.data;
      })
      },
    handleAddGoodsCategory(){
      if (!this.categoryName){
        this.$breadstick.notify("请输入分类名称");
        return;
      }
      insertGoodsCategory(this.categoryName).then(res=>{
        this.$breadstick.notify(res.data);
        this.getCategory();
      })
    },
    handleDeleteGoodsCategory(goodsCategory){
      deleteGoodsCategoryNoGoods(goodsCategory.id).then(res=>{
        this.$breadstick.notify(res.data);
        this.getCategory();
      })
    }
  }
}
</script>

<style scoped>

</style>